<template>
  <view v-if="detailInfo" class="question-detail-container">
    <view class="question-title">{{ detailInfo.title }}</view>
    <view v-if="platformInfo" class="header-container">
      <image
        :src="platformInfo.platform_logo"
        mode="scaleToFill"
        class="logo"
      />
      <view class="platform-detail">
        <view class="name">{{ platformInfo.platform_name }}</view>
        <view class="time">{{ detailInfo.created_at }}</view>
      </view>
    </view>
    <view class="question-content"><u-parse :html="detailInfo.content"></u-parse></view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import { platformInfoByBusinessId, questionDetailById } from '@/api/applet';
import { parseTime } from '@/utils/parseTime';
export default {
  data() {
    return {
      platformInfo: null,
      detailInfo: null
    }
  },
  onLoad(options) {
    this.getPlatformInfoByBusinessId();
    this.getQuestionDetailById(options.id);
  },
  computed: {
    ...mapGetters([
      'questionDetail'
    ])
  },
  methods: {
    // 获取平台详情
    getPlatformInfoByBusinessId() {
      uni.showToast({
        title: '加载中...',
        icon: 'loading',
      })
      platformInfoByBusinessId().then(result => {
        uni.hideToast();
        if (result && result.code === 200) {
          this.platformInfo = result.data;
        }
      })
    },

    getQuestionDetailById(id) {
      uni.showToast({
        title: '加载中...',
        icon: 'loading',
      })
      questionDetailById({ id }).then(result => {
        uni.hideToast();
        if (result && result.data) {
          result.data.created_at = parseTime(new Date(result.data.created_at), '{y}-{m}-{d} {h}:{m}:{s}');
          this.detailInfo = result.data;
        }
      })
    },
  }
}
</script>

<style lang="scss">
  .question-detail-container{
    padding: 40rpx 24rpx 24rpx 24rpx;

    .header-container{
      display: flex;
      align-items: center;
      margin: 24rpx 0 32rpx 0;

      .logo{
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        border: 2rpx solid #eaeaea;
      }

      .platform-detail{
        padding-left: 24rpx;

        .name{
          font-size: 28rpx;
        }

        .time{
          font-size: 24rpx;
          color: #666;
        }
      }
    }

    .question-title{
      font-size: 40rpx;
      font-weight: bold;
      margin-bottom: 24rpx;
    }

    .content-item{
      margin-bottom: 6rpx;
    }
  }
</style>
